// 轮播图
var item = document.getElementsByClassName('item')
var point = document.getElementsByClassName('point')
var pebt = document.getElementById('prev')
var gobt = document.getElementById('next')
var index = 0
var time = 0
var clearActive = function () {
	for (i = 0; i < item.length; i++) {
		item[i].className = 'item'
	}
	for (i = 0; i < point.length; i++) {
		point[i].className = 'point'
	}
}

var goIndex = function () {
	clearActive();
	// console.log(index)
	point[index].className = 'point active';
	item[index].className = 'item active';

}

var go = function () {
	if (index < 2) {
		index++
	} else {
		index = 0
	}

	goIndex()
}

var prev = function () {
	if (index == 0) {
		index = 2
	} else {
		index--
	}
	goIndex()

}

for (i = 0; i < point.length; i++) {
	point[i].addEventListener('click', function () {
		var pointIndex = this.getAttribute('data-index');
		index = pointIndex;
		goIndex()
		time = 0
	})
}

gobt.addEventListener('click', function () {
	go()
})
pebt.addEventListener('click', function () {
	prev()
})

setInterval(function () {
	time++;
	if (time == 20) {
		go();
		time = 0
	}
}, 150)


// close
function close() {
	var close = document.getElementById('aaaaa')
	// console.log(close);
	close.onclick = function () {
		window.open("about:#", "_self").close()
		// window.open(location,"_self").close() 

	}
}
close()
// 换肤
// function skinPeeler() {
// 	var two = document.getElementById('qwer')
// 	var twoCss = document.getElementById('twoCss');
// 	if(localStorage.getItem('href')) {
// 		twoCss.setAttribute('href', localStorage.getItem('href'))
// 	}
// 	var i = 0;
// 	var a = 'css/0001245c2.css'
// 	two.onclick = function () {
// 		if (i % 2 == 0) {
// 			a = 'css/threeCss.css'
// 		} else {
// 			a = 'css/0001245c2.css'
// 		}
// 		localStorage.setItem('href', a)
// 		twoCss.setAttribute('href',a)
// 		i++
// 	}

// }
// skinPeeler()
//  清除换肤
// function clear(){

// 	var qaz = document.getElementById('qaz')
// 	var twoCss = document.getElementById('twoCss');

// 	qaz.onclick = function(){
// 		twoCss.
// 	}
// }
// clear()
// skinPeeler()
// function skinPeeler2(){
// 	var two = document.getElementById('qwert')
// 	// var twoCss = document.getElementById('twoCss');
// 	var threeCss = document.getElementById('threeCss')
// 	two.onclick = function(){
// 		threeCss.setAttribute('href',"css/threeCss.css")
// 		// console.log(twoCss.getAttribute('href'))
// 	}
// }	
// skinPeeler2()


// skinPeeler()
// function changeSkin(obj, aSkin, oSkin) {
// 	for (var i = 0; i < obj.length; i++) {
// 		obj[i].index = i;
// 		obj[i].onclick = function () {
// 			var_this = this;
// 			for (var j in aSkin) {
// 				obj[j].className = '';
// 			}
// 			_this.classList.add('active');
// 			oSkin.setAttribute('href', aSkin[_this.index]);
// 		};
// 	}
// }
// changeSkin()
// window.onload = function () {
// 	var oSkin = document.getElementById('ull');
// 	var aLink = document.getElementsByTagName('li');
// 	var skin = ['../CSS/0001245c2.css', '../CSS/threeCss.css'];
// 	changeSkin(aLink, skin, oSkin);
// };



function abc() {
	var bbb = document.getElementsByClassName('bbb')[0];
	// console.log(bbb)
	var two = document.getElementById('qwer')
	two.onclick = function () {
		// console.log(bbb.id)
		if (bbb.id == "") {
			bbb.setAttribute('id', 'e_background')
		}
		else {
			bbb.id = ""
		}

	}
}
abc()


function photo() {
	var news = [
		{
			classId: 1,
			name: '岁月',
			img: 'img/37.jpg',
			href: 'years.html',
			body: '哪知岁月总是催人老，等到知时已迟了'
		},
		{
			classId: 2,
			name: '风景',
			href: 'scenery.html',
			img: 'img/38.jpg',
			body: '再美的风景，也需要欣赏它的人'
		},
		{
			classId: 3,
			name: '旅游日记',
			href: 'diary.html',
			img: 'img/39.jpg',
			body: '旅游重要的不是重点，而是过程'
		},
		{
			classId: 4,
			name: '相爱的人',
			href: 'love.html',
			img: 'img/40.jpg',
			body: '犹如黑暗中的烛光，照亮了整个人类的历史'
		},
		{
			classId: 5,
			name: '建筑',
			href: 'architecture.html',
			img: 'img/41.jpg',
			body: '不同的外形，相同的内在'
		},
		{
			classId: 6,
			name: '神奇的自然',
			href: 'nature.html',
			img: 'img/42.jpg',
			body: '有一种神奇叫做孤独的孕育'
		}
	]
	var conter = [
		{
			id: 1,
			classId: 1,
			title: "岁月",
			time: "发布日期：2017-06-02",
			item1: "客户：你看这个logo放大的同时能不能缩小一点设计师：……你说啥？",
			item2: "客户：我感觉这个大小不合适，整体大一点，占面积小一点",
			item3: "设计师：……你说啥？",
			item4: "客户：TM到底能不能干了",
			item5: "设计师：我能力有限。。。",
			img1: "img/43.jpg",
			img1: "img/44.jpg",
			img1: "img/45.jpg"
		},
		{
			id: 2,
			classId: 2,
			title: "风景",
			time: "发布日期：2017-06-02",
			item1: '设计师"高考"真题，你能那几分？',
			item2: "Q：你花了一整天的时间，绞尽脑汁，终于做出一张极其满意的Banner图，发给客户75秒后，收到一段长达60秒的语音反馈，言辞激烈。作为设计师，此时你应该怎么做？",
			item3: "A：准备重做。",
			item4: "Q：快到下班时间了，公司准备聚餐的同事分成了两拨，一拨准备去吃烤肉，另一拨准备去吃火锅，此时，你应该怎么做？",
			item5: "A：泡上一杯咖啡，正式开始一天的工作。",
			item6: "Q：你的女朋友给你发微信说，她大姨的二舅的外甥的侄女准备新开一家奶茶店，想让你帮忙免费设计一款logo，此时你应该怎么做？",
			item7: "A：一巴掌抽醒自己，设计师哪儿来的女朋友",
			img1: "img/46.jpg",
			img1: "img/47.jpg",
			img1: "img/48.jpg"
		},
		{
			id: 3,
			classId: 3,
			title: "相爱的人",
			time: "发布日期：2017-06-02",
			item1: '设计师奇葩求职日记"高考"真题，你能那几分？',
			item2: "面试官：面试设计师的？",
			item3: "求职者：嗯嗯",
			item4: "面试官：太好了，正好公司电脑换了，你去帮忙修一下吧",
			item5: "②",
			item6: "面试官：作为设计师，你有什么特长吗？",
			item7: "求职者：我会一些手绘",
			item8: "面试官：手绘？会画符咒吗？",
			item9: "求职者：符……符咒？",
			item10: "面试官：对！我们老板说公司风水不好，正想改一下运势呢！",
			item11: "求职者：我是设计师，不是萨满法师……",
			item12: "③",
			item13: "求职面试官：你是专业设计师是吧，那你说说我身上这件衣服的色值多少？者：我是设计师，不是萨满法师……",
			item14: "求职者：……",
			img1: "img/49.jpg",
			img1: "img/50.jpg",
			img1: "img/51.jpg"
		},
		{
			id: 4,
			classId: 4,
			title: "建筑",
			time: "发布日期：2017-06-02",
			item1: '设计师奇葩求职日记"高考"真题，你能那几分？',
			item2: "面试官：面试设计师的？",
			item3: "求职者：嗯嗯",
			item4: "面试官：太好了，正好公司电脑换了，你去帮忙修一下吧",
			item5: "②",
			item6: "面试官：作为设计师，你有什么特长吗？",
			item7: "求职者：我会一些手绘",
			item8: "面试官：手绘？会画符咒吗？",
			item9: "求职者：符……符咒？",
			item10: "面试官：对！我们老板说公司风水不好，正想改一下运势呢！",
			item11: "求职者：我是设计师，不是萨满法师……",
			item12: "③",
			item13: "求职面试官：你是专业设计师是吧，那你说说我身上这件衣服的色值多少？者：我是设计师，不是萨满法师……",
			item14: "求职者：……",
			img1: "img/52.png",
			img1: "img/53.jpg",
			img1: "img/54.jpg"
		},
		{
			id: 5,
			classId: 5,
			title: "建筑",
			time: "发布日期：2017-06-02",
			item1: '设计师奇葩求职日记"高考"真题，你能那几分？',
			item2: "面试官：面试设计师的？",
			item3: "求职者：嗯嗯",
			item4: "面试官：太好了，正好公司电脑换了，你去帮忙修一下吧",
			item5: "②",
			item6: "面试官：作为设计师，你有什么特长吗？",
			item7: "求职者：我会一些手绘",
			item8: "面试官：手绘？会画符咒吗？",
			item9: "求职者：符……符咒？",
			item10: "面试官：对！我们老板说公司风水不好，正想改一下运势呢！",
			item11: "求职者：我是设计师，不是萨满法师……",
			item12: "③",
			item13: "求职面试官：你是专业设计师是吧，那你说说我身上这件衣服的色值多少？者：我是设计师，不是萨满法师……",
			item14: "求职者：……",
			img1: "img/55.png",
			img1: "img/56.jpg",
			img1: "img/57.jpg"
		},
		{
			id: 6,
			classId: 6,
			title: "神奇的自然",
			time: "发布日期：2017-06-02",
			item1: '设计师奇葩求职日记"高考"真题，你能那几分？',
			item2: "面试官：面试设计师的？",
			item3: "求职者：嗯嗯",
			item4: "面试官：太好了，正好公司电脑换了，你去帮忙修一下吧",
			item5: "②",
			item6: "面试官：作为设计师，你有什么特长吗？",
			item7: "求职者：我会一些手绘",
			item8: "面试官：手绘？会画符咒吗？",
			item9: "求职者：符……符咒？",
			item10: "面试官：对！我们老板说公司风水不好，正想改一下运势呢！",
			item11: "求职者：我是设计师，不是萨满法师……",
			item12: "③",
			item13: "求职面试官：你是专业设计师是吧，那你说说我身上这件衣服的色值多少？者：我是设计师，不是萨满法师……",
			item14: "求职者：……",
			img1: "img/58.png",
			img1: "img/59.jpg",
			img1: "img/60.jpg"
		}
	]

	function initNews(arr) {
		if (typeof arr === 'undefined') {
			// 数组切割，保留原来数组内容，并不是真的切掉
			arr = news.slice();
			arr.length = 6
		}
		var oNews = document.getElementById('paging');
		oNews.innerHTML = ''
		for (index = 0; index < arr.length; index++) {
			var item = arr[index];
			var oLi = document.createElement('li')
			// var oDiv = oLi.getElementsByClassName('div')
			oLi.id = item.classId
			// console.log(oLi);
			oLi.innerHTML += `<div><div class="box-1"><a><img src="${item.img}" alt=""></a></div><div class="box-2"><a href="${item.href}"><span>${item.name}</span></a><p>${item.body}</p></div></div>`
			oLi.onclick = function () {
				// console.log(this.id);
				// debugger
				// alert(`${item.href}?id=123`)
				window.location.href = `years.html?id=${this.id}`
			}

			oNews.appendChild(oLi)
			//  给新建的li添加开始动画
			// var clientHeight = document.documentElement.clientHeight
			// document.onscroll = function(){
			//     for(index = 0; index< oLi.length; index++){
			// 	    var al = oLi[index];
			// 	    // console.log(el)
			// 	    if(al.getBoundingClientRect().top<clientHeight){
			// 		    al.classList.add('animated')
			// 		    al.classList.add('bounceInUp')
			// 	    }
			//     }
			// }
		}

	}
	initNews()

	function inConter() {
		var oConter = document.getElementById('years-box');
		oConter.innerHTML = ''
		for (index = 0; index < conter.length; index++) {
			var item = conter[index];
			var oDiv = document.createElement('div')
			// var oUl = document.createElement('ul')
			// var oLi = document.createElement('li')
			oDiv.innerHTML += `<div class="years-top">${item.title}</div>`
			oDiv.innerHTML += `<div class="years-head">${item.time}</div>`
			oDiv.innerHTML += `<div class="years-main"><div class="main-top" id="main-top"><ul class="classType"><li>${item.item1}</li><li>${item.item2}</li><li>${item.item3}</li><li>${item.item4}</li><li>${item.item5}</li></ul></div><div class="main-low"><ul><li>${item.item6}</li><li>${item.item7}</li><li>${item.item8}</li><li>${item.item9}</li><li>${item.item10}</li><li>${item.item11}</li></ul></div></div>`
			

			oConter.appendChild(oDiv)
			// oDiv.appendChild(oUl)
			// oUl.appendChild(oLi)

		}


	}
	inConter()
}
photo()




// function initPage(){
//     var oPage = document.getElementById('page')
//     for(index = 0;index< news.length/3;index++){
//         var oSpan = document.createElement('span')
//         oSpan.innerHTML = (index)
//         oSpan.onclick = function(){
//             // 每页6个
//             let item = news.slice(this.innerHTML * 4,(+this.innerHTML+1) * 4)

//             initNews(item)
//         }
//         oPage.appendChild(oSpan)
//     }
// }
// initPage()


